<template>
	<view class="container">
		<!-- 头部安全距离 -->
		<view class="status_bar"></view>
		<!-- 展示 -->
		<view class="display_card">
			<!-- 标题 -->
			<view class="display_card_title">{{nftGoodsInfo.goodsName}}</view>
			<!-- 展示物品 -->
			<view class="display_card_product">
				<image :src="nftGoodsInfo.preview"></image>
			</view>
			<!-- 台子 -->
			<view class="display_card_tai">
				<image src="https://ipfs.s11edao.com/ipfs/QmNP3reoKy2UQ7TA4rSq7Wjd1aGap3vYmKo9WDFTj66mdK" mode=""></image>
			</view>
			<!-- 数量 -->
			<view class="display_card_sign">
				<view class="sign_lael">限量</view>
				<view class="sign_num">
					<text style="margin-right: 8rpx;">{{nftGoodsInfo.quantity}}</text>
					份
				</view>
			</view>
		</view>
		<!-- 内容信息 -->
		<view class="nft_detail_content">
			<!-- 持有者&创造者 -->
			<view class="info_person">
				<!-- 持有者 -->
				<view class="holders" @tap="toNftSpace">
					<view>持有者</view>
					<view class="holders_photo">
						<image src="https://ipfs.s11edao.com/ipfs/QmdQTcEnxVXbkSHaEH1AoJZ1AxMWEW5FbpdvGX2Yv7U5M3" mode=""></image>
					</view>
				</view>
				<!-- 创造者 -->
				<view class="owner">
					<view>创造者</view>
					<view class="owner_photo">
						<image src="https://ipfs.s11edao.com/ipfs/QmdQTcEnxVXbkSHaEH1AoJZ1AxMWEW5FbpdvGX2Yv7U5M3" mode=""></image>
					</view>
				</view>
			</view>
			<!-- 基本信息 -->
			<view class="info_basis">
				<view class="margin-b30">
					<view class="">权益属性</view>
					<view class="">版权品</view>
				</view>
				<view class="">
					<view class="">系列</view>
					<view class="">无系列</view>
				</view>
			</view>
			<BsinTitle text="认证信息" background="var(--echo-nft-card-bg-color)" color="#fff"></BsinTitle>
			<!-- 认证信息 -->
			<view class="info_approve_content" style="padding-top: 0;padding-bottom: 0;">
				<view class="margin-b30">
					<view class="">合约地址</view>
					<view class="info_approve_contract">
						<text class="info">{{nftContract.contract}}</text>
						<image style="width: 20px;height: 20px;" src="../static/images/my/copy.png"></image>
					</view>
				</view>
				<view class="margin-b30">
					<view class="">认证网络</view>
					<view class="">Conflux</view>
				</view>
				<view class="margin-b30">
					<view class="">认证标准</view>
					<view class="">ERC1155</view>
				</view>
			</view>
			<!-- 产品描述信息 -->
			<view class="info_product">
				<BsinTitle text="详情" background="var(--echo-nft-card-bg-color)" color="#fff"></BsinTitle>
				<view class="info_product_content">
					{{nftGoodsInfo.description}}
				</view>
			</view>
		</view>
		<!-- 底部按钮 -->
		<view class="bottom_btn_card">
			<view class="bottom_btn_card_price">
				¥ {{nftGoodsInfo.price}}
			</view>
			<view class="bottom_btn_card_left" @click="toShare">
				<u-icon name="share" size="30" color="#fff"></u-icon>
				<view class="">炫耀</view>
			</view>
			<view class="">
				<u-button v-if="obtainMethod == 1 || obtainMethod == 3 || obtainMethod == 4" text="立即领取" color="var(--echo-main-color)"
					@tap="toObtain" class="bottom_btn"></u-button>
				<u-button v-else text="立即购买" color="var(--echo-main-color)" @tap="toBuy(nftGoodsInfo.serialNo)"
					class="bottom_btn"></u-button>
			</view>
		</view>

		<!-- 勋章领取 弹出层-->
		<u-popup :show="showObtainModal" @close="closeObtainShow" mode="center" :round="10">
			<view class="exchange">
				<u--input placeholder="请输入口令进行领取" border="surround" suffixIconStyle="color: #909399; font-size: 24px"
					v-model="password">
					<u--text text="口令" slot="prefix" margin="0 3px 0 0" type="tips"></u--text>
				</u--input>
				<view class="exchange_btn">
					<u-button class="btn-custom-style" size="small" :plain="true" :hairline="true" text="领取"
						color="var(--echo-main-color)" @tap="confirmObtain"></u-button>
				</view>
			</view>
		</u-popup>
		<!-- 分享弹出层 -->
		<view class="popupBox">
			<view class="popupBox-shadow" v-if="modalShow" @click="modalShow=false">
				<view class="popupBox-box" v-if="modalShow">
					<view class="canvas_container" @longpress="saveShareImg(canvasToTempFilePath)">
						<canvas :style="{ width: canvasW + 'px', height: canvasH + 'px',}" canvas-id="myCanvas"
							id="myCanvas"></canvas>
					</view>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	import {
		getNftGoodsDetail,
		obtainNft,
		obtainNftPasswordCheck
	} from '@/config/nft.js';
	export default {
		data() {
			return {
				password: '',
				nftGoodsInfo: {},
				nftContract: {},
				obtainMethod: '',
				anyWebInfo: '',
				// 控制勋章领取
				showObtainModal: false,
				modalShow: false,
				qrCode: 'https://ipfs.s11edao.com/ipfs/QmQX7vX8nXz7r6wQSPcs45Ebz3Rdn44ZvNZQfepoFjpuAD',
				logoSrc: 'https://ipfs.s11edao.com/ipfs/QmQX7vX8nXz7r6wQSPcs45Ebz3Rdn44ZvNZQfepoFjpuAD',
				// 绘制的文件
				canvasToTempFilePath: null,
				canvasW: 300, // 画布宽 
				canvasH: 620, // 画布高 
				// x轴偏移量
				xTextDeviation: 20,
			};
		},
		onLoad({
			serialNo
		}) {
			console.log(serialNo);
			// NFT详情
			getNftGoodsDetail({
				serialNo
			}).then(res => {
				console.log(res)
				this.obtainMethod = res.data?.obtainMethod
				this.nftContract = res.data?.contract
				console.log(this.obtainMethod)
				this.nftGoodsInfo = res.data
			})
		},
		methods: {
			
			// 绘制
			createPoster() {
				setTimeout(() => {
					const ctx = uni.createCanvasContext('myCanvas')
					ctx.setFillStyle('white')
					ctx.setFillStyle('#333')
					ctx.setFontSize(16)
					ctx.fillText(`存证时间: ${2022-5-21}`, this.xTextDeviation, 60)
					ctx.drawImage(this.nftGoodsInfo.preview, (this.canvasW - 240) / 2, 90, 240, 240)
					ctx.fillText(`名称: ${213}`, this.xTextDeviation, 360)
					ctx.fillText(`发行量: ${222}`, this.xTextDeviation, 390)
					ctx.fillText(`价格: ${222}`, this.xTextDeviation, 420)
					ctx.fillText(`Token ID: ${222}`, this.xTextDeviation, 450)
					ctx.fillText(`NFT基于公链conflux铸造`, (this.canvasW - ctx.measureText(`NFT基于公链conflux铸造`)
						.width) / 2, 490)
					// 二维码
					ctx.drawImage(this.qrCode, this.xTextDeviation, 530, 80, 80)
					ctx.fillText('Made in s11e Dao', 280 - ctx.measureText('Made in s11e Dao').width, 550)
					ctx.drawImage(this.logoSrc, 200, 560, 40, 40)
					// 标题
					ctx.font = 'bold 20px normal'
					ctx.fillText('s11e-DAO', 280 - ctx.measureText('s11e-DAO').width, 30)
					ctx.draw(false, () => {
						uni.canvasToTempFilePath({
							canvasId: 'myCanvas',
							quality: 1,
							fileType: 'jpg',
							success: res => {
								console.log('resres', res);
								this.canvasToTempFilePath = res.tempFilePath;
								this.$u.toast('长按进行图片保存');
							},
						})
					})
				}, 1000)
			},

			// 保存到系统相册
			saveShareImg(canvasToTempFilePath) {
				uni.saveImageToPhotosAlbum({
					filePath: canvasToTempFilePath,
					success: (res) => {
						this.$u.toast('保存成功，快去分享到朋友圈吧~');
					},
					fail: (error) => {
						this.$u.toast('保存失败~');
					}
				});
			},

			// 分享 打开模态框
			toShare() {
				this.modalShow = true
				this.createPoster()
			},
			
			toBuy(serialNo) {
				this.anyWebInfo = uni.getStorageSync('ANYWEBINFO');
				if(!this.anyWebInfo){
					this.getAnywebInfo()
				}
				uni.navigateTo({
					url: `/pages/Nft/BuyNft?serialNo=${serialNo}`
				})
			},

			// 立即领取
			toObtain() {
				this.showObtainModal = true
				this.anyWebInfo = uni.getStorageSync('ANYWEBINFO');
				if(!this.anyWebInfo){
					this.getAnywebInfo()
				}
			},
			// 关闭领取模态框
			closeObtainShow() {
				this.showObtainModal = false
			},

			getAnywebInfo() {
				uni.navigateTo({
					url: "/pages/Nft/AnyWeb"
				});
			},
			
			async confirmObtain() {

				let res = await obtainNftPasswordCheck({
					serialNo: this.nftGoodsInfo.serialNo,
					password: this.password
				})
				console.log(res)
				console.log(res?.code != "000000")
				if (res?.code != "000000") {
					this.$refs.uToast.show({
						message: res.message
					})
					return
				}
				this.showObtainModal = false
				
				this.anyWebInfo = uni.getStorageSync('ANYWEBINFO');
				if (this.anyWebInfo) {
					let obtainNftParams = {
						code: this.anyWebInfo.code,
						serialNo: this.nftGoodsInfo.serialNo,
						toAddress: this.anyWebInfo.address[0],
						password: this.password,
						chainNetwork: 'test',
					};
					console.log("领取返回结果")
					let ress = await obtainNft({
						...obtainNftParams
					})

					this.$refs.uToast.show({
						message: ress
					})
				}

			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		min-height: 100vh;
		background: $echo-nft-bg-color;
		color: #fff;

		// 顶部安全距离
		.status_bar {
			height: var(--status-bar-height);
		}

		// 展示区域
		.display_card {
			padding-top: 60rpx;
			margin: 0 auto;

			// 展示的标题
			&_title {
				margin: 0 auto;
				width: 46%;
				padding: 20rpx;
				text-align: center;
				background: $echo-nft-card-bg-color;
				border-radius: 40rpx;
			}

			// 展示的图
			&_product {
				width: 400rpx;
				height: 400rpx;
				border-radius: 50%;
				overflow: hidden;
				margin: 60rpx auto;
				transition: all 0.4s linear;

				image {
					width: 100%;
					height: 100%;
				}

				&:hover {
					border-radius: 0;
					transform: scale(1.2);
				}
			}

			// 展示台
			&_tai {
				width: 80%;
				height: 200rpx;
				margin: 0 auto;

				image {
					width: 100%;
					height: 100%;
				}
			}

			// 价格
			&_sign {
				width: 240rpx;
				margin: 60rpx auto;
				text-align: center;
				display: flex;
				border-radius: 6rpx;
				overflow: hidden;

				.sign_lael {
					width: 40%;
					background-color: $echo-main-color;
				}

				.sign_num {
					width: 60%;
					background-color: $echo-nft-card-bg-color;
					color: $echo-main-color;
				}
			}
		}

		// 信息展示区域
		.nft_detail_content {
			padding: 0 20rpx;

			// 创造者
			.info_person {
				background-color: $echo-nft-card-bg-color;
				padding: 30rpx;
				margin-bottom: 30rpx;
				border-radius: 10rpx;
				overflow: hidden;
				display: flex;
				justify-content: center;

				.holders,
				.owner {
					display: flex;
					justify-content: space-between;
					align-items: center;

					.holders_photo,
					.owner_photo {
						width: 50rpx;
						height: 50rpx;
						border-radius: 50%;
						overflow: hidden;
						margin: 0 30rpx;

						image {
							width: 100%;
							height: 100%;
						}
					}
				}
			}

			.info_basis,
			.info_approve_content {
				background-color: $echo-nft-card-bg-color;
				padding: 30rpx;
				border-bottom-left-radius: 10rpx;
				border-bottom-right-radius: 10rpx;
				overflow: hidden;
				margin-bottom: 30rpx;

				.info_approve_contract {

					.info {
						width: 400rpx;
						/*1.强制不换行*/
						white-space: nowrap;
						/*2.溢出隐藏*/
						overflow: hidden;
						/*3.超出部分用省略号表示*/
						text-overflow: ellipsis;
					}

					display: flex;
				}

				&>view {
					display: flex;
					justify-content: space-between;
					align-items: center;
				}
			}

			// 产品
			.info_product {
				padding-bottom: 200rpx;

				&_content {
					padding: 0 30rpx 30rpx;
					background-color: $echo-nft-card-bg-color;
				}
			}
		}

		// 底部按钮
		.bottom_btn_card {
			position: fixed;
			border-radius: 20rpx;
			bottom: 40rpx;
			left: 50%;
			margin-left: -40%;
			width: 80%;
			box-sizing: border-box;
			margin-top: 30rpx;
			padding: 0 30rpx;
			height: 120rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			background-color: $echo-nft-bg-color;

			&_price {
				font-size: 44rpx;
				color: $echo-main-color;
			}

			.bottom_btn {
				border-radius: 40rpx;
				width: 300rpx;
			}
		}

		// 勋章领取
		.exchange {
			width: 700rpx;
			background-color: #fff;
			border-radius: 10rpx;
			overflow: hidden;
			padding: 40rpx;
			padding-top: 80rpx;
			box-sizing: border-box;

			&_btn {
				width: 400rpx;
				margin: 0 auto;
				height: 80rpx;
				margin-top: 40rpx;
			}

			.btn-custom-style {
				width: 400rpx;
				margin: 0 auto;
				border-radius: 40rpx;
				height: 80rpx;
				margin-top: 40rpx;
			}
		}

		.popupBox {

			// 自定义模态框样式
			.popupBox-shadow {
				position: fixed;
				inset: 0px;
				display: flex;
				align-items: center;
				justify-content: center;
				z-index: 999;
				background: rgba(0, 0, 0, 0.5);
			}

			.popupBox-box {
				background: #FFFFFF;
				border-radius: 10rpx;
				padding: 10px;
				top: 0;
			}
		}
	}
</style>
